<template>
  <Table ref="table" :columns="columns" :data="curProperty[category]">
    <template slot-scope="{ row, index }" slot="tableName">
      <div v-if="dynamicProperty[index]"
        :class="['tableName', dynamicProperty[index].valueType === 'group' ? 'group' : '']"
      >
        <span>{{dynamicProperty[index].name}}</span>
        <Poptip v-if="dynamicProperty[index].poptip" word-wrap title="提示" placement="top-start"
          transfer trigger="hover" popper-class="attrList-tableName-poptip">
          <div slot="content">{{dynamicProperty[index].poptip}}</div>
          <span class="ivu-icon iconfont icon-help"></span>
        </Poptip>
      </div>
    </template>
    <template slot-scope="{ row, index }" slot="defaultValue">
      <fieldCell
        v-if="dynamicProperty[index] && dynamicProperty[index].valueType !== 'group'"
        v-model="curProperty[category][index].defaultValue"
        :compGroup="compGroup"
        :config="{ 
          clearable: true,
          ...dynamicProperty[index],
          key: dynamicProperty[index].name,
          editor: dynamicProperty[index].valueType,
          options: getOptions(index),
        }"
        @change="change"
      ></fieldCell>
    </template>
    <template slot-scope="{ row, index }" slot="showField">
      <Checkbox v-if="dynamicProperty[index] && dynamicProperty[index].valueType !== 'group'"
        v-model="curProperty[category][index].showField" @on-change="change"></Checkbox>
    </template>
  </Table>
</template>

<script>
    import fieldCell from './fieldCell'
    import storeVar from '../../mixins/storeVar';
    export default {
      components: { fieldCell },
      mixins:[storeVar],
      props: {
          tableData: {
              default: () => {
                  return [];
              }
          },
          category:{
            default: () => {
              return 'attrs';
            }
          }
      },
      data () {
          return {
            columns: [
                {
                    key: 'name',
                    title: this.$t(`compDesign.jProperty.attrName`),
                    minWidth: 110,
                    maxWidth: 210,
                    align: 'left',
                    slot: 'tableName',
                    // render: (h, params) => {
                    //   if (params.row.valueType === 'group') {
                    //     return h('div', {
                    //       class: 'group',
                    //       style: {
                    //         fontSize: '14px',
                    //         fontWeight: 800
                    //       }
                    //     }, [ h('span', params.row.name), ])
                    //   } else {
                    //     return h('div', params.row.name)
                    //   }
                    // }
                },
                {
                    key: 'defaultValue',
                    title: this.$t(`compDesign.jProperty.defaultValue`),
                    minWidth: 100,
                    align: 'left',
                    slot: 'defaultValue'
                },
                {
                    key: 'showField',
                    title: this.$t(`compDesign.jProperty.isUse`),
                    width: 70,
                    align: 'center',
                    slot: 'showField'
                }
            ]
          };
      },
      mounted () {
      },
      computed: {
        // 动态读取组件的属性参数，实现组件添加属性参数时能自动更新并展示
        dynamicProperty() {
          let tag = this.compGroup.currentItem.tag
          let dynamicProperty = []

          if (tag && this.$star[tag]) {
            dynamicProperty = this.$star[tag]._defaultAttribute()
          }
          if (dynamicProperty.length === this.curProperty[this.category].length) {
            return dynamicProperty
          } else {
            return this.curProperty[this.category]
          }
        }
      },
      methods:{
        change() {
          this.compGroup.setClassProperty()
        },
        getOptions(index) {
          if (this.dynamicProperty[index].sourceKey === 'fields' && this.curProperty.fields) {
            return this.curProperty.fields.map(item => {
              return item.length > 0 ? {label: item[1].defaultValue, value: item[1].defaultValue} : false
            })
          } else if (this.dynamicProperty[index].sourceKey === 'comObject') {
            // console.log(this.compGroup);
            return this.compGroup.group.map(item => {
              return { label: item.title, value: item.id }
            })
          } else {
            return this.dynamicProperty[index].options
          }
        }
      }

    };
</script>

<style lang="less">
.property-editor {
  .ivu-table-cell {
    overflow: visible;
    .tableName {
      .ivu-icon {
        padding: 12px 8px;
        cursor: pointer;
        &:hover {
          color: var(--primary-color);
        }
      }
    }
    .group {
      position: relative;
      display: inline-block;
      color: #333;
      font-size: 14px;
      font-weight: 800;
      &:before {
        content: "";
        position: absolute;
        bottom: -2px;
        left: 0;
        right: 0;
        height: 2px;
        // margin-right: 6px;
        background-color: var(--primary-color);
      }
    }
  }
}
.attrList-tableName-poptip {
  .ivu-poptip-inner, .ivu-poptip-arrow ::before { 
    // background-color: var(--primary-color);
    box-shadow: 0 1px 6px rgba(0,0,0,.2);
    text-decoration: none;
    // color: #fff;
  }
  .ivu-poptip-inner { 
    max-height: 600px;
    overflow: auto;
    // background-color: rgba(70,76,91,1);
    // box-shadow: 0 1px 6px rgba(0,0,0,.2);
    // color: #fff;
  }
  // .ivu-poptip-title-inner {
  //   color: #fff;
  // }
  // .ivu-poptip-arrow ::before {
  //   color: rgba(70,76,91,.9);
  // }
  // .ivu-poptip-arrow ::after {
  //   color: rgba(70,76,91,.9);
  // }
}
</style>
